<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="../echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>应用管理</legend>
</fieldset>

<div class="site-demo-button" id="layerDemo" style="margin-left: 30px">
    <button data-method="createApp" class="layui-btn">创建新应用</button>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>应用详情</legend>
</fieldset>

<div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="float:left;width:400px;height:400px;">
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            // Schema:
            // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
            var app1 = [
                [1,0.6,0.4,0.7,0.3,0.2,0.8]
            ];

            var app2 = [
                [1,0.5,0.5,0.25,0.75,0.9,0.1]
            ];

            var app3 = [
                [1,0.45,0.55,0.18,0.82,0.66,0.34]
            ];

            var lineStyle = {
                normal: {
                    width: 1,
                    opacity: 0.5
                }
            };

            option = {
                backgroundColor: '#FFFFFFFF',
                title: {
                    text: '应用通信比率雷达图',
                    left: 'center',
                    textStyle: {
                        color: '#000000'
                    }
                },
                legend: {
                    bottom: 5,
                    data: ['APP01', 'APP02', 'APP03'],
                    itemGap: 20,
                    textStyle: {
                        color: '#202020',
                        fontSize: 14
                    },
                    selectedMode: 'single'
                },
                radar: {
                    indicator: [
                        {name: 'CLOUD', max: 1},
                        {name: 'DTR', max: 1},
                        {name: 'DRR', max: 1},
                        {name: 'CTR', max: 1},
                        {name: 'CRR', max: 1},
                        {name: 'STR', max: 1},
                        {name: 'SRR', max: 1}
                    ],
                    shape: 'circle',
                    splitNumber: 5,
                    name: {
                        textStyle: {
                            color: 'rgb(50, 40, 20)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: [
                                'rgba(60, 30, 20, 0.1)',
                                'rgba(60, 30, 20, 0.2)',
                                'rgba(60, 30, 20, 0.4)',
                                'rgba(60, 30, 20, 0.6)',
                                'rgba(60, 30, 20, 0.8)',
                                'rgba(60, 30, 20, 1)'
                            ].reverse()
                        }
                    },
                    splitArea: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(238, 197, 102, 0.5)'
                        }
                    }
                },
                series: [
                    {
                        name: 'APP01',
                        type: 'radar',
                        lineStyle: lineStyle,
                        data: app1,
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: '#FF6060'
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.25
                            }
                        }
                    },
                    {
                        name: 'APP02',
                        type: 'radar',
                        lineStyle: lineStyle,
                        data: app2,
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: '#20FF40'
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.25
                            }
                        }
                    },
                    {
                        name: 'APP03',
                        type: 'radar',
                        lineStyle: lineStyle,
                        data: app3,
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: 'rgb(120, 120, 255)'
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.25
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </div>
    <div style="float:left;width:auto">

        <!--<table class="layui-hide" id="test"></table>-->

        <!--<script src="../layui/layui.js" charset="utf-8"></script>-->
        <!--<script>-->
            <!--layui.use('table', function(){-->
                <!--var table = layui.table;-->

                <!--table.render({-->
                    <!--elem: '#test'-->
                    <!--,url:'/demo/table/user/'-->
                    <!--,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增-->
                    <!--,cols: [[-->
                         <!--{field:'item' , width:120, title: '参数项'}-->
                        <!--,{field:'mean' , width:120, title: '含义'}-->
                        <!--,{field:'ratio', width:120, title: '比率', sort: true}-->
                    <!--]]-->
                <!--});-->
            <!--});-->
        <!--</script>-->

    </div>
</div>


</body>
</html>